<template>
  <div class="top-taps">
    <div class="tabs-cont">
      <div class="left-cont fl">
        <div class="pro-name fl" @click="ToHome">鲲鹏</div>
        <div class="pro-func fl" @click="ToHome">
          <div>产品数字化</div>
          <div>服务平台</div>
        </div>
        <div class="shu fl"></div>
        <div class="city fl">
          <span>{{ city }}</span>
          <el-select
            v-model="value"
            placeholder="【切换城市】"
            size="mini"
            class="change-city"
            @change="ChangeCity"
            style="line-height: 1.4"
          >
            <el-option label="长沙" value="长沙"></el-option>
            <el-option label="株洲" value="株洲"></el-option>
            <el-option label="湘潭" value="湘潭"></el-option>
            <el-option label="衡阳" value="衡阳"></el-option>
            <el-option label="邵阳" value="邵阳"></el-option>
            <el-option label="岳阳" value="岳阳"></el-option>
            <el-option label="常德" value="常德"></el-option>
            <el-option label="张家界" value="张家界"></el-option>
            <el-option label="益阳" value="益阳"></el-option>
            <el-option label="郴州" value="郴州"></el-option>
            <el-option label="永州" value="永州"></el-option>
            <el-option label="怀化" value="怀化"></el-option>
            <el-option label="娄底" value="娄底"></el-option>
            <el-option
              label="湘西土家族苗族自治"
              value="湘西土家族苗族自治"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="right-cont fr">
        <!-- <el-popover
          placement="bottom"
          trigger="hover"
          class="pop"
          v-for="(item, index) in menuList"
          :key="item.Id"
        >
          <ul class="aul" v-if="index == 0 || index == 3">
            <li class="ali" v-for="item2 in item.Children" :key="item2.Id">
              <div
                class="aa"
                @click="ToService(item2.Id, item2.Url, item2.TypeName)"
              >
                {{ item2.TypeName }}
              </div>
              <ul class="aaul">
                <li
                  class="aali"
                  v-for="item3 in item2.Children"
                  :key="item3.Id"
                  @click="ToService(item3.Id, item3.Url, item3.TypeName)"
                >
                  {{ item3.TypeName }}
                </li>
              </ul>
            </li>
          </ul>
          <ul class="aul" v-else>
            <li class="ali" v-if="item.Children.length > 0">
              <ul class="aaul">
                <li
                  class="aali"
                  v-for="item2 in item.Children"
                  :key="item2.Id"
                  @click="ToService(item2.Id, item2.Url, item2.TypeName)"
                >
                  {{ item2.TypeName }}
                </li>
              </ul>
            </li>
            <li v-else>
              <ul class="aaul">
                <li
                  class="aali"
                  @click="ToService(item.Id, item.Url, item.TypeName)"
                >
                  {{ item.TypeName }}
                </li>
              </ul>
            </li>
          </ul>
          <div
            slot="reference"
            @click="ToService(item.Id, item.Url, item.TypeName)"
          >
            {{ item.TypeName }}
          </div>
        </el-popover> -->
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <!-- <el-menu-item
                v-for="(item, index) in menuList"
                :key="item.Id"
                :index="index.toString()"
                >{{ item.TypeName }}</el-menu-item
              > -->
          <el-submenu index="1" v-if="menuList[0]">
            <template slot="title">{{ menuList[0].TypeName }}</template>
            <el-submenu
              v-for="item in menuList[0].Children"
              :key="item.Id"
              :index="item.Id.toString()"
            >
              <template slot="title">
                {{ item.TypeName ? item.TypeName : "" }}
              </template>
              <el-menu-item
                v-for="item2 in item.Children"
                :key="item2.Id"
                @click="ToService(item2.Id, item2.Url, item2.TypeName)"
                :index="item2.Id.toString()"
              >
                {{ item2.TypeName ? item2.TypeName : "" }}
              </el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="2" v-if="menuList[1]">
            <template slot="title">{{ menuList[1].TypeName }}</template>
            <el-menu-item
              v-for="item in menuList[1].Children"
              :key="item.Id"
              :index="item.Id.toString()"
              @click="ToService(item.Id, item.Url, item.TypeName)"
              >{{ item.TypeName }}</el-menu-item
            >
          </el-submenu>
          <el-submenu index="3" v-if="menuList[2]">
            <template slot="title">{{ menuList[2].TypeName }}</template>
            <el-menu-item
              v-for="item in menuList[2].Children"
              :key="item.Id"
              :index="item.Id.toString()"
              @click="ToService(item.Id, item.Url, item.TypeName)"
              >{{ item.TypeName }}</el-menu-item
            >
          </el-submenu>
          <el-submenu index="4" v-if="menuList[3]">
            <template slot="title">{{ menuList[3].TypeName }}</template>
            <el-submenu
              v-for="item in menuList[3].Children"
              :key="item.Id"
              :index="item.Id.toString()"
            >
              <template slot="title">
                {{ item.TypeName ? item.TypeName : "" }}
              </template>
              <el-menu-item
                v-for="item2 in item.Children"
                :key="item2.Id"
                :index="item2.Id.toString()"
                @click="ToService(item2.Id, item2.Url, item2.TypeName)"
              >
                {{ item2.TypeName ? item2.TypeName : "" }}
              </el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="5" v-if="menuList[4]">
            <template slot="title">{{ menuList[4].TypeName }}</template>
            <el-menu-item
              v-for="item in menuList[4].Children"
              :key="item.Id"
              :index="item.Id.toString()"
              @click="ToService(item.Id, item.Url, item.TypeName)"
              >{{ item.TypeName }}</el-menu-item
            >
          </el-submenu>
          <el-menu-item index="6" v-if="menuList[5]" @click="ToAboutUs">{{
            menuList[5].TypeName
          }}</el-menu-item>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TopTabs2",
  data() {
    return {
      city: "长沙",
      active: 2,
      value: "",
      menuList: [],
      activeIndex: "1",
    };
  },
  methods: {
    ChangeCity(value) {
      //console.log(value);
      this.city = value;
      this.value = "";
      this.$cookies.set("city", value);
    },
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
      this.$cookies.set("keys2", key);
    },
    ToAboutUs() {
      this.$router.push({ name: "AboutUs" });
      this.$cookies.set("TopActive", 9);
    },
    ToService(id, url, title) {
      // alert(url);
      if (url != 0) {
        if (url == 1) {
          this.$cookies.set("newid", id);
          // console.log(this.$route.name);
          if (this.$route.name == "Service") {
            this.$router.go(0);
          } else {
            this.$router.push({ name: "Service" });
          }
        } else if (url == 2) {
          // this.$router.push({ name: "AddForm" });
          this.$cookies.set("newid", id);
          this.$cookies.set("title", title);
          if (this.$route.name == "AddForm") {
            this.$router.go(0);
          } else {
            this.$router.push({ name: "AddForm" });
          }
        } else {
          window.open(url);
        }
      }
    },
    GetList2() {
      this.$axios({
        url: "/New/GetNewTypeList",
        method: "post",
        data: {
          limit: 10,
          page: 1,
          day: 0,
          typeid: 1,
          title: "",
          userdata: this.$cookies.get("userdata"),
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      })
        .then((res) => {
          this.menuList = res.data.data;
        })
        .catch((err) => {
          //console.log(err);
        });
    },
    ToHome() {
      this.$router.push({ name: "Home" });
    },
    ToNews() {
      this.$router.push({ name: "News" });
      this.$cookies.set("TopActive", 2);
    },
    ToMatching() {
      this.$router.push({ name: "Matching" });
      this.$cookies.set("TopActive", 3);
    },
    ToRe(tabs, n) {
      if (this.active > 3 && this.active < 7) {
        this.active = tabs;
        this.$emit("func", n);
      } else {
        this.$router.push({ name: "Resource", params: { Type: n } });
        this.$cookies.set("TopActive", tabs);
      }
    },
  },
  mounted() {
    this.GetList2();
    this.activeIndex = this.$cookies.get("keys2");
    if (this.$cookies.get("city")) {
      this.city = this.$cookies.get("city");
    }
    if (this.$cookies.get("TopActive")) {
      this.active = this.$cookies.get("TopActive");
    }
  },
};
</script>

<style scoped>
.top-taps {
  height: 100px;
  background-color: #fff;
  line-height: 100px;
}
.tabs-cont {
  width: 1200px;
  margin: 0 auto;
  height: 100px;
  overflow: hidden;
}
.left-cont {
  overflow: hidden;
}
.pro-name {
  font-size: 46px;
  color: #095aff;
  font-weight: bold;
  cursor: pointer;
}
.pro-func {
  color: #666;
  font-size: 18px;
  font-weight: bold;
  line-height: 26px;
  padding: 25px 0;
  margin-left: 5px;
  cursor: pointer;
}
.shu {
  width: 1px;
  height: 35px;
  background: #dcdcdc;
  margin: 0 26px;
  position: relative;
  top: 37px;
}
.city {
  color: #333;
  font-size: 15px;
  cursor: pointer;
}
.city span {
  color: #095aff;
}
.tabs-list {
  overflow: hidden;
}
.tabs-list li {
  float: left;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  margin-left: 50px;
}
.tabs-list li.active {
  color: #095aff;
}
.tabs-list li:hover {
  color: #095aff;
}
.aul {
  overflow: hidden;
}
.pop {
  float: left;
  margin-left: 50px;
  cursor: pointer;
  font-size: 14px;
  line-height: 40px;
  position: relative;
  top: 30px;
}
.ali {
  float: left;
  width: 130px;
}
.aa {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 700;
  padding-bottom: 15px;
  cursor: pointer;
  color: #182c49;
  border-bottom: 1px solid rgba(204, 205, 209, 0.6);
}
.aali {
  margin-top: 14px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  cursor: pointer;
}
.aaul .aali:first-child {
  margin-top: 0;
}
.right-cont {
  position: relative;
  top: 20px;
}
</style>